Veb-ilova Manifestini to'liq tushunish orqali Progressiv Veb-ilovangizning (PWA) butun imkoniyatlarini oching. PWA'ni optimal foydalanuvchi tajribasi va topiluvchanlik uchun qanday sozlashni o'rganing.
Veb-ilova Manifesti: Progressiv Veb-ilovalarni (PWA) Sozlash bo'yicha Qo'llanmangiz
Veb-ilova Manifesti — bu veb-ilovangiz haqida brauzerlar va operatsion tizimlarga ma'lumot taqdim etuvchi JSON faylidir. Ushbu ma'lumot ilova foydalanuvchining qurilmasiga o'rnatilganda ishlatiladi va uning Progressiv Veb-ilova (PWA) sifatida qanday ko'rinishini va ishlashini belgilaydi. Uni veb-saytingizni o'rnatiladigan, ilovaga o'xshash tajribaga aylantiradigan loyiha deb o'ylang. Yaxshi sozlangan manifest foydalanuvchilarni jalb qilish va topiluvchanlik uchun juda muhimdir.
Progressiv Veb-ilova (PWA) nima?
Veb-ilova Manifestiga sho'ng'ishdan oldin, PWA nima ekanligini eslab o'taylik. PWAlar foydalanuvchilarga ilovaga o'xshash tajribani taklif qiluvchi veb-ilovalardir. Ular:
- Ishonchli: Servis ishchilari (service workers) yordamida bir zumda yuklanadi va oflayn yoki sifatsiz tarmoqlarda ishlaydi.
- Tezkor: Foydalanuvchi harakatlariga silliq animatsiyalar bilan va qotib qolmaydigan aylantirish orqali tezda javob beradi.
- Jozibali: Push-bildirishnomalar va asosiy ekranga o'rnatish imkoniyati kabi xususiyatlar bilan chuqur foydalanuvchi tajribasini taklif etadi.
Veb-ilova Manifestining Roli
Veb-ilova Manifesti PWAning asosidir. U brauzerlarga quyidagi ma'lumotlarni taqdim etadi:
- PWA'ni o'rnatish: Foydalanuvchilarga veb-ilovani o'z qurilmalariga o'rnatishga, uni asosiy ekranga yoki ilovalar ro'yxatiga qo'shishga imkon beradi.
- PWA'ni to'g'ri ko'rsatish: Ilovaning nomi, ikonkalari, mavzu rangi va boshqa vizual jihatlarini belgilaydi.
- PWA'ning ishlashini boshqarish: Ilovaning qanday ishga tushishi kerakligini (masalan, to'liq ekran rejimida yoki alohida oynada) va operatsion tizim bilan qanday integratsiyalashishi kerakligini belgilaydi.
O'zingizning `manifest.json` faylingizni yaratish
Veb-ilova Manifesti odatda `manifest.json` deb nomlangan JSON faylidir. U veb-ilovangizning asosiy katalogida joylashtirilishi kerak. Mana oddiy misol:
{
"name": "Mening Ajoyib PWA'm",
"short_name": "Ajoyib PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Keling, ushbu xususiyatlarning har birini ko'rib chiqamiz:
`name`
Veb-ilovangizning toʻliq nomi. Bu nom foydalanuvchilarga ilovani oʻrnatish taklif qilinganda va ilovalar roʻyxatida koʻrsatiladi.
Misol:
"name": "Global Yangiliklar Ilovasi"
`short_name`
Ilovangiz nomining qisqaroq versiyasi, asosiy ekran yoki ilovalar roʻyxati kabi joy cheklangan hollarda ishlatiladi. Uni qisqa va loʻnda saqlang.
Misol:
"short_name": "Global Yangiliklar"
`start_url`
Ilova ishga tushirilganda yuklanishi kerak bo'lgan URL. Bu odatda veb-ilovangizning bosh sahifasi bo'ladi, lekin u ma'lum bir ochilish sahifasi bo'lishi ham mumkin.
Misol:
"start_url": "/"
Foydalanuvchilar PWA'ni qanday ishga tushirayotganini kuzatish uchun so'rov parametrlari bilan URL'dan ham foydalanishingiz mumkin:
"start_url": "/?utm_source=homescreen"
`display`
Ilova ishga tushirilganda qanday ko'rsatilishini belgilaydi. Bir nechta variantlar mavjud:
- `standalone`: Ilova o'zining yuqori darajadagi oynasida, manzil satri kabi brauzer UI elementlarisiz ochiladi.
- `fullscreen`: Ilova butun ekranni egallaydi, hatto holat satrini ham yashiradi.
- `minimal-ui`: `standalone` ga o'xshash, lekin orqaga va yangilash tugmalari kabi minimal brauzer UI'sini taqdim etadi.
- `browser`: Ilova oddiy brauzer yorlig'i yoki oynasida ochiladi.
Tavsiya: `standalone` odatda PWAlar uchun afzal ko'rilgan variantdir.
Misol:
"display": "standalone"
`background_color`
Ilova ishga tushirilganda uning ochilish ekranining fon rangi. Bu ilova ikonkasi va ilova tarkibi o'rtasida uzluksiz o'tishni ta'minlash uchun muhimdir.
Misol:
"background_color": "#ffffff"
`theme_color`
Ilovaning UI'sini, masalan, Android'dagi holat satrini uslublash uchun ishlatiladigan mavzu rangi. Bu rang ilovangizning brendiga mos kelishi kerak.
Misol:
"theme_color": "#000000"
`icons`
Har biri ilova uchun ikonkani ifodalovchi obyektlar massivi. Ilovaning turli qurilmalar va ekran o'lchamlarida yaxshi ko'rinishini ta'minlash uchun turli o'lchamdagi bir nechta ikonkalarni taqdim etishingiz kerak.
Har bir ikonka uchun xususiyatlar:
- `src`: Ikonka rasmining URL manzili.
- `sizes`: Ikonkaning piksellardagi o'lchamlari (masalan, "192x192").
- `type`: Ikonka rasmining MIME turi (masalan, "image/png").
Tavsiya etilgan ikonka o'lchamlari:
- 48x48
- 72x72
- 96x96
- 144x144
- 192x192
- 512x512
Misol:
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
Qo'shimcha Manifest Xususiyatlari
Yuqoridagi xususiyatlar eng keng tarqalgan bo'lsa-da, Veb-ilova Manifesti PWA'ni sozlash uchun boshqa ko'plab imkoniyatlarni qo'llab-quvvatlaydi:
`id`
PWA'ngiz uchun noyob identifikator. Bu bir xil nomdagi bir nechta PWA'ga ega bo'lsangiz, ziddiyatlarning oldini olish uchun muhimdir.
Misol:
"id": "com.example.myapp"
`scope`
Ilovaning navigatsiya doirasini belgilaydi. Bu veb-saytingizdagi qaysi URL'lar PWA'ning bir qismi hisoblanishini aniqlaydi. Agar foydalanuvchi doiradan tashqariga o'tsa, ilova oddiy brauzer yorlig'ida ochiladi.
Misol:
"scope": "/app/"
Ushbu misolda faqat `/app/` bilan boshlanadigan URL'lar PWA'ning bir qismi hisoblanadi.
`orientation`
Ilova uchun afzal ko'rilgan ekran yo'nalishini belgilaydi. Variantlar orasida `portrait` (portret), `landscape` (landshaft), `any` (har qanday) va boshqalar mavjud.
Misol:
"orientation": "portrait"
`related_applications`
Bog'liq mahalliy (native) ilovalarni belgilaydigan obyektlar massivi. Bu sizning PWA'ngizni allaqachon o'rnatgan foydalanuvchilarga o'z mahalliy ilovalaringizni targ'ib qilish imkonini beradi.
Misol:
"related_applications": [
{
"platform": "play",
"id": "com.example.myapp"
}
]
Ushbu misol Google Play Store'da `com.example.myapp` ID'siga ega bo'lgan bog'liq mahalliy ilova mavjudligini ko'rsatadi.
`prefer_related_applications`
Foydalanuvchiga PWA o'rniga bog'liq mahalliy ilovani o'rnatish taklif qilinishi kerakligini ko'rsatuvchi mantiqiy qiymat.
Misol:
"prefer_related_applications": true
`categories`
Ilovaning kategoriyalarini ifodalovchi satrlar massivi. Bu foydalanuvchilarga ilovangizni ilovalar do'konlarida yoki qidiruv natijalarida topishga yordam beradi.
Misol:
"categories": ["news", "information"]
`shortcuts`
Foydalanuvchilar o'zlarining asosiy ekranidagi ilova ikonkasi orqali kirishlari mumkin bo'lgan yorliqlar ro'yxatini belgilaydi. Bu foydalanuvchilarga ilova ichidagi umumiy vazifalarni tezda bajarish imkonini beradi.
Misol:
"shortcuts": [
{
"name": "So'nggi Yangiliklar",
"short_name": "Yangiliklar",
"description": "Eng so'nggi yangilik maqolalarini o'qing",
"url": "/news",
"icons": [{
"src": "/icons/news.png",
"sizes": "192x192",
"type": "image/png"
}]
}
]
Manifestni Veb-ilovangizga Ulash
`manifest.json` faylini yaratganingizdan so'ng, uni HTML'ingizning `
` bo'limiga `` tegini qo'shish orqali veb-ilovangizga ulashingiz kerak:
<link rel="manifest" href="/manifest.json">
Manifestingizni Tekshirish
`manifest.json` faylingiz to'g'ri formatlanganligi va barcha kerakli xususiyatlarni o'z ichiga olganligiga ishonch hosil qilish uchun uni tekshirish muhimdir. Manifestingizni tekshirish uchun JSONLint kabi onlayn vositalardan yoki Chrome DevTools'dan foydalanishingiz mumkin.
PWA'ngizni Sinovdan O'tkazish
Manifestingizni yaratib, ulaganingizdan so'ng, PWA'ngizni turli brauzerlar va qurilmalarda sinab ko'rishingiz kerak, u kutilganidek ishlashiga ishonch hosil qilish uchun. Manifestingizni tekshirish va har qanday muammolarni aniqlash uchun Chrome DevTools (Application -> Manifest) dan foydalaning.
Veb-ilova Manifestini Sozlash bo'yicha Eng Yaxshi Amaliyotlar
Veb-ilova Manifestingizni sozlashda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:
- Barcha kerakli xususiyatlarni taqdim eting: `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` va `icons` kabi barcha muhim xususiyatlarni kiritganingizga ishonch hosil qiling.
- Mos keladigan ikonka o'lchamlaridan foydalaning: Turli qurilmalar va ekran o'lchamlarini qo'llab-quvvatlash uchun turli o'lchamdagi bir nechta ikonkalarni taqdim eting.
- To'g'ri ko'rsatish rejimini tanlang: Ilovangizning foydalanuvchi tajribasiga eng mos keladigan `display` rejimini tanlang. `standalone` odatda afzal ko'rilgan variantdir.
- Manifestingizni tekshiring: `manifest.json` faylingiz to'g'ri formatlanganligiga ishonch hosil qilish uchun uni har doim tekshiring.
- PWA'ngizni sinovdan o'tkazing: PWA'ngizni turli brauzerlar va qurilmalarda sinab ko'ring, u kutilganidek ishlashiga ishonch hosil qilish uchun.
- SEO uchun optimallashtiring: Ilovangizning topiluvchanligini yaxshilash uchun `name`, `short_name` va `description` da tegishli kalit so'zlardan foydalaning.
- Mahalliylashtirishni ko'rib chiqing: Agar ilovangiz global auditoriyaga mo'ljallangan bo'lsa, turli tillar uchun turli nomlar, tavsiflar va ikonkalarga ega bo'lgan manifestingizning mahalliylashtirilgan versiyalarini taqdim etishni o'ylab ko'ring.
Yaxshi Sozlangan Veb-ilova Manifestlariga Misollar
Mana mashhur PWAlarning yaxshi sozlangan Veb-ilova Manifestlariga bir nechta misollar:
Twitter Lite
{
"name": "Twitter Lite",
"short_name": "Twitter",
"icons": [
{
"src": "/static/icons/mstile-150x150.png",
"sizes": "150x150",
"type": "image/png"
},
{
"src": "/static/icons/twitter-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/twitter-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1da1f2",
"description": "Twitter Lite - bu dunyoda nima bo'layotganini ko'rishning tezroq va trafikni tejaydigan usuli.",
"orientation": "portrait"
}
Starbucks
{
"name": "Starbucks",
"short_name": "Starbucks",
"icons": [
{
"src": "/static/icons/starbucks-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/starbucks-icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#f2f0eb",
"theme_color": "#00704a",
"description": "Ilova yordamida sevimli Starbucks ichimliklaringiz va taomlaringizga buyurtma bering.",
"orientation": "portrait",
"shortcuts": [
{
"name": "Hozir Buyurtma Berish",
"short_name": "Buyurtma",
"description": "Yangi buyurtma boshlash",
"url": "/order",
"icons": [{
"src": "/static/icons/order-icon.png",
"sizes": "192x192",
"type": "image/png"
}]
}
]
}
Veb-ilova Manifestining Kelajagi
Veb-ilova Manifesti rivojlanayotgan standart bo'lib, vaqt o'tishi bilan yangi xususiyatlar va imkoniyatlar qo'shilib borilmoqda. PWA'laringiz eng so'nggi texnologiyalardan to'liq foydalanayotganiga ishonch hosil qilish uchun W3C'ning so'nggi yangilanishlari va tavsiyalarini kuzatib boring.
Xulosa
Veb-ilova Manifesti har qanday PWAning muhim tarkibiy qismidir. Manifestingizni to'g'ri sozlash orqali siz uzluksiz va jozibali foydalanuvchi tajribasini taqdim etishingiz mumkin, bu esa veb-ilovangizni mahalliy ilovadek his qildiradi. Ushbu qo'llanma Veb-ilova Manifesti, uning xususiyatlari, eng yaxshi amaliyotlari va misollari haqida keng qamrovli ma'lumot berdi. Ushbu ko'rsatmalarga rioya qilish orqali siz PWA'laringizning to'liq imkoniyatlarini ochishingiz va butun dunyodagi foydalanuvchilaringizga yuqori darajadagi foydalanuvchi tajribasini taqdim etishingiz mumkin.
Veb-ilova Manifestining kuchini qabul qiling va veb-saytlaringizni foydalanuvchilarni xursand qiladigan va jalb etishni kuchaytiradigan o'rnatiladigan, ilovaga o'xshash tajribalarga aylantiring.